<template>
  <div class="fund-item">
    <img src="static/images/east/east-bg1.jpg" class="item-bg">
    <div class="left-table">
        <east-table :dataList="currData" :itemIndex="itemIndex"></east-table>
    </div>
    <img src="static/images/west/jh-logo.png" class="left-jh-logo">
    <img src="static/images/west/gold-logo1.png" class="left-logo">
    <img src="static/images/logo6.png" class="logo">
  </div>
</template>
<script>
import EastTable from './EastTable'
export default {
  name: 'EastGoldPage',
  components: {
    EastTable
  },
  props: {
    dataList: Array,
    itemIndex: Number
  },
  data () {
    return {
      pageIndex: 1,
      timer: null
    }
  },
  computed: {
    pageTotal () {
      if (this.dataList.length === 0) {
        return 0
      }
      if (this.dataList.length % 4 > 0) {
        return parseInt(this.dataList.length / 4) + 1
      } else {
        return parseInt(this.dataList.length / 4)
      }
    },
    currData () {
      if (this.pageIndex < this.pageTotal) {
        return this.dataList.slice((this.pageIndex - 1) * 4, this.pageIndex * 4)
      } else if (this.pageIndex === this.pageTotal) {
        return this.dataList.slice((this.pageIndex - 1) * 4, this.dataList.length)
      } else {
        return []
      }
    }
  },
  methods: {
    addIndex () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      let this_ = this
      this.timer = setTimeout(function () {
        try {
          if (this_.pageIndex < this_.pageTotal) {
            this_.pageIndex++
          } else {
            clearTimeout(this.timer)
            this_.$emit('changeIndex')
            return
          }
        } catch (error) {
          window.external.WriteLog('eastScreen gold changeIndex error:' + error)
        }
        try {
          this_.addIndex()
        } catch (error) {
          var this__ = this
          this__.addIndex()
          window.external.WriteLog('eastScreen gold addIndex error:' + error)
        }
      }, 4000)
    }
  },
  activated () {
    this.pageIndex = 1
    this.addIndex()
  },
  mounted () {
  }
}
</script>
<style lang="stylus" scoped>
  .fund-item
    width: 4000px
    height: 300px
    .clock-item
      position:absolute
      left: 10px
      top: 20px
      width: 262px
      height: 262px
    .date-item
      position: absolute
      left: 300px
      color: white
      top: 120px
      width: 700px
      height: 180px
      display: flex
      flex-direction: column
      justify-content: center
      align-items: flex-end
      font-size: 50px
      .time
        display: flex
        justify-content: center
        align-items: center
        >img
          width: 50px
          padding-right: 10px
        >span
          font-size: 100px
          padding-left: 10px
          padding-right: 10px
      .date
        padding-top: 20px
    .item-bg
      position: absolute
      left: 0
      top: 0
      width: 100%
    .left-table
      position: absolute
      left:830px
      width: 2350px
      height: 290px
    .left-jh-logo
      position: absolute
      left: 280px
      top: 0px
      width: 500px
    .left-logo
      position: absolute
      left: 350px
      top: 155px
      width: 350px
    .logo
      position: absolute
      left: 3190px
      top: 0
      width: 810px
      height: 300px
</style>
